<template>
  <div class="page-icon">
    <h3>icon font</h3>
    <div class="icon-list">
      <div class="icon__item" v-for="i in iconList" :key="i">
        <span class="item-name"><i :class="i"></i></span>
        <span class="item-text">{{i}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "page-icon",
  data() {
    return {
      iconList: [
        "mx-icon-add",
        "mx-icon-addmessage",
        "mx-icon-addresslist",
        "mx-icon-affiliations-li",
        "mx-icon-addperson",
        "mx-icon-boss",
        "mx-icon-alipay-line",
        "mx-icon-addressbook",
        "mx-icon-at",
        "mx-icon-airplay",
        "mx-icon-calendar",
        "mx-icon-attestation",
        "mx-icon-camera",
        "mx-icon-certificate-fil",
        "mx-icon-coinpurse-line",
        "mx-icon-collect",
        "mx-icon-compile",
        "mx-icon-details",
        "mx-icon-circle-line",
        "mx-icon-cloud-history",
        "mx-icon-community-line",
        "mx-icon-discovery",
        "mx-icon-delete",
        "mx-icon-dispose",
        "mx-icon-doc",
        "mx-icon-cspace",
        "mx-icon-exchange",
        "mx-icon-ding",
        "mx-icon-down",
        "mx-icon-dingtalk-line",
        "mx-icon-gift",
        "mx-icon-glass",
        "mx-icon-file",
        "mx-icon-GPS",
        "mx-icon-hardware-fill",
        "mx-icon-HRM",
        "mx-icon-im-more",
        "mx-icon-Eapp-line",
        "mx-icon-group",
        "mx-icon-horn",
        "mx-icon-im-face",
        "mx-icon-homepage",
        "mx-icon-invite",
        "mx-icon-launch-page",
        "mx-icon-likegood",
        "mx-icon-index-line",
        "mx-icon-live",
        "mx-icon-link",
        "mx-icon-im-voice",
        "mx-icon-mobilephone",
        "mx-icon-dmail",
        "mx-icon-message",
        "mx-icon-new-recruit",
        "mx-icon-little-taget",
        "mx-icon-more",
        "mx-icon-left",
        "mx-icon-next-arrow",
        "mx-icon-notice",
        "mx-icon-nomemo",
        "mx-icon-newgroup",
        "mx-icon-namecard",
        "mx-icon-phone",
        "mx-icon-qq",
        "mx-icon-photo",
        "mx-icon-medal",
        "mx-icon-redpacket",
        "mx-icon-patriarch",
        "mx-icon-roundclose",
        "mx-icon-im-keyboard",
        "mx-icon-roundreduce",
        "mx-icon-railway",
        "mx-icon-QRcode",
        "mx-icon-savememo",
        "mx-icon-roundadd",
        "mx-icon-refresh",
        "mx-icon-search",
        "mx-icon-scan",
        "mx-icon-send",
        "mx-icon-principal",
        "mx-icon-service",
        "mx-icon-scan-namecard",
        "mx-icon-secret",
        "mx-icon-share",
        "mx-icon-signin-line",
        "mx-icon-sms",
        "mx-icon-sketch",
        "mx-icon-setting",
        "mx-icon-signal",
        "mx-icon-skin",
        "mx-icon-star",
        "mx-icon-subordinate",
        "mx-icon-task",
        "mx-icon-statistics",
        "mx-icon-threeline-fill",
        "mx-icon-study",
        "mx-icon-voice",
        "mx-icon-square",
        "mx-icon-wechat",
        "mx-icon-sport",
        "mx-icon-work",
        "mx-icon-warn",
        "mx-icon-workmore",
        "mx-icon-safety",
        "mx-icon-workset",
        "mx-icon-voipphone",
        "mx-icon-shield",
        "mx-icon-shakehands",
        "mx-icon-video",
        "mx-icon-task-done",
        "mx-icon-meeting",
        "mx-icon-synergy",
        "mx-icon-workfile-line",
        "mx-icon-approval-fill",
        "mx-icon-addresslist-fil",
        "mx-icon-cmail",
        "mx-icon-collect-fill",
        "mx-icon-boss-fill",
        "mx-icon-addressbook-fil",
        "mx-icon-bizcall-fill",
        "mx-icon-calendar-fill",
        "mx-icon-cspace-fill",
        "mx-icon-delete-fill",
        "mx-icon-doc-fill",
        "mx-icon-camera-fill",
        "mx-icon-copyto",
        "mx-icon-dingtalk",
        "mx-icon-Eapp",
        "mx-icon-ding-ding-fill",
        "mx-icon-file-fill",
        "mx-icon-dmail-fill",
        "mx-icon-conf-video-fill",
        "mx-icon-gather-fill",
        "mx-icon-Inbox",
        "mx-icon-coinpurse",
        "mx-icon-certification-f",
        "mx-icon-exchange-fill",
        "mx-icon-inform-fill",
        "mx-icon-discovery-fill",
        "mx-icon-likegood-fill",
        "mx-icon-gps-fill",
        "mx-icon-dingtab",
        "mx-icon-invite-fill",
        "mx-icon-launch-page-fil",
        "mx-icon-homepage-fill",
        "mx-icon-gift-fill",
        "mx-icon-medal-fill",
        "mx-icon-journal-fill",
        "mx-icon-memo",
        "mx-icon-live-fill",
        "mx-icon-message-fill",
        "mx-icon-meeting-fill",
        "mx-icon-newapplication-",
        "mx-icon-people-fill",
        "mx-icon-photo-fill",
        "mx-icon-new-recruit-fil",
        "mx-icon-phone-fill",
        "mx-icon-ping",
        "mx-icon-qq-fill",
        "mx-icon-report-fill",
        "mx-icon-roundreduce-fil",
        "mx-icon-namecard-fill",
        "mx-icon-safety-fill",
        "mx-icon-redpacket-fill",
        "mx-icon-replieslist",
        "mx-icon-roundadd-fill",
        "mx-icon-service-fill",
        "mx-icon-newgroup-fill",
        "mx-icon-study-fill",
        "mx-icon-star-fill",
        "mx-icon-signal-fill",
        "mx-icon-task-checkbox-d",
        "mx-icon-setting-fill",
        "mx-icon-signin",
        "mx-icon-skin-fill",
        "mx-icon-shakehands-fill",
        "mx-icon-sketch-fill",
        "mx-icon-work-fill",
        "mx-icon-statistics-fill",
        "mx-icon-video-fill",
        "mx-icon-trashcan",
        "mx-icon-synergy-fill 2",
        "mx-icon-warn-fill",
        "mx-icon-roundclose-fill"
      ]
    };
  }
};
</script>
<style lang="scss">
.page-icon {
  padding: 20px;
  text-align: center;

  .icon-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    .icon__item {
      width: 150px;
      height: 70px;
      .item-name {
        display: block;
        & > i{
          font-size: 20px;
        }
      }

      &:hover {
        color: #FF7D2E;
        cursor: pointer;
      }
    }
    
  }
}
</style>
